<template>
  <div class="audit-index">
    <el-card class="audit-card">
      <p>当前有 {{ ListNum }} 道题目待审核</p>

      <!-- 表格 -->

      <el-table border="" :data="auditLists" style="width: 100%">
        <el-table-column type="index" label="序号" width="50px">
        </el-table-column>
        <el-table-column label="试题编号" min-width="130px">
          <template v-slot="scope">
            <a class="number-id-color" @click="previewItem(scope.row.id)"
              >{{ scope.row.number }}
            </a></template
          >
        </el-table-column>
        <el-table-column prop="subject" label="学科" width="50px">
        </el-table-column>
        <el-table-column label="题型" width="80px">
          <template v-slot="scope">
            <span v-if="scope.row.questionType === '1'">单选题</span>
            <span v-if="scope.row.questionType === '2'">多选题</span>
            <span v-if="scope.row.questionType === '3'">简答题</span>
          </template>
        </el-table-column>
        <el-table-column label="题干" min-width="230px">
          <template v-slot="scope">
            <span v-html="scope.row.question"></span>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" width="180px">
          <template v-slot="scope">
            {{ scope.row.addDate | formatTime }}
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="100px">
        </el-table-column>
        <el-table-column label="难度" width="80px">
          <template v-slot="scope">
            <span v-if="scope.row.difficulty === '1'">简单</span>
            <span v-if="scope.row.difficulty === '2'">一般</span>
            <span v-if="scope.row.difficulty === '3'">困难</span>
          </template>
        </el-table-column>
        <el-table-column label="使用次数" width="80px">0 </el-table-column>
        <el-table-column label="审核状态" width="80px">
          <template v-slot="scope">
            <span v-if="scope.row.chkState === 0">待审核</span>
            <span v-if="scope.row.chkState === 1">已审核</span>
            <span v-if="scope.row.chkState === 2">已拒绝</span>
          </template>
        </el-table-column>
        <el-table-column prop="chkRemarks" label="审核意见" width="100px">
        </el-table-column>
        <el-table-column prop="chkUser" label="审核人" width="100px">
        </el-table-column>
        <el-table-column label="发布状态" width="80px">
          <template v-slot="scope">
            <span v-if="scope.row.publishState === 0">未发布</span>
            <span v-if="scope.row.publishState === 1">已发布</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220px">
          <template v-slot="scope">
            <el-button
              size="medium"
              type="text"
              :disabled="scope.row.chkState == 1"
              @click="editAduit(scope.row.id)"
              >审核</el-button
            >
            <el-button
              size="medium"
              type="text"
              @click="previewItem(scope.row.id)"
              >预览</el-button
            >
            <el-button size="medium" type="text" disabled>下架</el-button>
            <el-button size="medium" type="text">修改</el-button>
            <el-button size="medium" type="text" disabled
              >删除</el-button
            ></template
          >
        </el-table-column>
      </el-table>

      <el-pagination
        background
        @size-change="auditSizeChange"
        @current-change="auditCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pagesize"
        layout=" prev, pager, next,sizes, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 预览对话框 -->
    <preview-info
      v-if="VisiblePreview"
      :id="previewID"
      :VisiblePreview="VisiblePreview"
      @ClosePreview="VisiblePreview = false"
    ></preview-info>
    <!-- 审核对话框 -->
    <edit-audit
      v-if="VisibleEditAudit"
      :id="EditID"
      :VisibleEditAudit="VisibleEditAudit"
      @CloseEditAudit="VisibleEditAudit = false"
    ></edit-audit>
  </div>
</template>

<script>
import { getauditlsit } from '@/assets/api/base/audit.js';
// 预览组件
import PreviewInfo from '../preview';
import EditAudit from './editAudit';
export default {
  name: 'audit',
  props: {},
  components: {
    PreviewInfo,
    EditAudit
  },
  data: function() {
    return {
      currentPage: 1,
      pagesize: 10,
      total: 0,
      // 题目总数
      ListNum: 0,
      auditLists: [],
      previewID: null,
      // 预览对话框
      VisiblePreview: false,
      // 审核对话框
      VisibleEditAudit: false,
      // 审核意见
      EditID: null
    };
  },
  created() {
    this.loadAuditList();
  },
  methods: {
    async loadAuditList() {
      try {
        const params = {
          currentPage: this.currentPage,
          pagesize: this.pagesize
        };
        const { data } = await getauditlsit(params);
        this.auditLists = data.items;
        this.ListNum = data.counts;
        // 当前页数
        this.currentPage = data.pages;
        // 总页数
        this.total = data.counts;
      } catch (err) {
        this.$message.error('数据获取失败');
      }
    },
    auditSizeChange(size) {
      this.pagesize = size;
      this.this.loadAuditList();
    },
    auditCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.this.loadAuditList();
    },
    // 预览按钮点击事件
    previewItem(id) {
      this.previewID = id;
      this.VisiblePreview = true;
    },
    // 审核意见
    editAduit(id) {
      this.EditID = id;
      this.VisibleEditAudit = true;
    }
  }
};
</script>

<style lang="less" scoped>
.audit-index {
  .audit-card {
    position: relative;
    padding-bottom: 60px;
    .number-id-color {
      color: #4444fd;
    }

    .el-pagination {
      margin-top: 30px;
      position: absolute;
      right: 30px;
    }
  }
}
</style>
